<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta name="description" content="">
		<meta name="author" content="">
		<title>修改商品信息</title>
		<link rel="stylesheet" href="../../css/base.css" />
		<link rel="stylesheet" href="../../css/common.css" />
		<!-- Bootstrap Core CSS -->
		<link href="../../sbadmin/bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
		<!-- MetisMenu CSS -->
		<link href="../../sbadmin/bower_components/metisMenu/dist/metisMenu.min.css" rel="stylesheet">
		<!-- DataTables CSS -->
		<link href="../../sbadmin/bower_components/datatables-plugins/integration/bootstrap/3/dataTables.bootstrap.css" rel="stylesheet">
		<!-- Custom CSS -->
		<link href="../../sbadmin/dist/css/sb-admin-2.css" rel="stylesheet">
		<!-- Custom Fonts -->
		<link href="../../sbadmin/bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
		<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
		<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
		<!--[if lt IE 9]>
	<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
	<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
	<![endif]-->
		<style>
			body {
				padding: 0 15px !important;
			}
			
			.file-style {
				filter: alpha(opacity=0);
				-moz-opacity: 0;
				-khtml-opacity: 0;
				opacity: 0;
				position: absolute;
				left: 0px;
				cursor: pointer;
				height: 130px;
				width: 360px;
				z-index: 3000;
			}
			
			.setup-img {
				width: 360px;
				height: 130px;
			}
		</style>
	</head>

	<body style="background:#FFF;">
		<div class="comm-tt-font pr">
			出售商品 > 商品详情 > 修改商品信息
		</div>
		<div class="member-search-box" style="padding: 10px 0;">
			<div class="msb-ico">商品所属分类：儿童摄影 <a href="stype.html" class="edg-a">更换</a></div>
		</div>
		<div class="zl-ccbox" style="margin-top: 20px;">
			<div class="zl-cccc pr">
				<div class="edit-item clb">
					<div class="edit-item-tt fl"><em>*</em>门店编号：</div>
					<div class="edit-item-cc fl ml10">
						<input type="text" class="edit-input" />
					</div>
				</div>
				<div class="edit-item clb">
					<div class="edit-item-tt fl"><em>*</em>门店名：</div>
					<div class="edit-item-cc fl ml10">
						<input type="text" class="edit-input" />
					</div>
				</div>
				<div class="edit-item clb">
					<div class="edit-item-tt fl"><em>*</em>城市：</div>
					<div class="edit-item-cc fl ml10">
						<select class="eic-select" style="width: 200px;"></select>
					</div>
				</div>
				<div class="edit-item clb">
					<div class="edit-item-tt fl"><em>*</em>区域：</div>
					<div class="edit-item-cc fl ml10">
						<select class="eic-select" style="width: 200px;"></select>
					</div>
				</div>
				<div class="edit-item clb">
					<div class="edit-item-tt fl"><em>*</em>电话：</div>
					<div class="edit-item-cc fl ml10">
						<input type="text" class="edit-input" />
					</div>
				</div>
				<div class="edit-item clb">
					<div class="edit-item-tt fl"><em>*</em>详细地址：</div>
					<div class="edit-item-cc fl ml10">
						<input type="text" class="edit-input" />
					</div>
				</div>
				<div class="edit-item clb">
					<div class="edit-item-tt fl"><em>*</em>门店类型：</div>
					<div class="edit-item-cc fl ml10">
						<ul class="shop-type clb mt5">
							<li class="cur">儿童摄影</li>
							<li>成人摄影</li>
							<li>孕妇</li>
							<li>全家福</li>
						</ul>
					</div>
				</div>
				<div class="edit-item clb">
					<div class="edit-item-tt fl"><em>*</em>营业时间：</div>
					<div class="edit-item-cc fl ml10">
						<input type="text" class="edit-input" />
					</div>
				</div>
				<div class="edit-item clb">
					<div class="edit-item-tt fl"><em>*</em>拍摄场景：</div>
					<div class="edit-item-cc fl ml10">
						<ul class="shop-type clb mt5">
							<li class="cur">内景</li>
							<li>外景</li>
							<li>街拍</li>
						</ul>
					</div>
				</div>
				<div class="wo-form-item clb mt20">
					<div class="wo-form-itemtt fl" style="width: 90px;text-align: right;">门店介绍：</div>
					<div class="wod-form-itemcc fl ml10" style="width: 620px;">
						<textarea class="ed-textarea"></textarea>
					</div>
				</div>
				<div class="wo-form-item clb mt20">
					<div class="wo-form-itemtt fl" style="width: 90px;text-align: right;">门店图片：</div>
					<div class="wod-form-itemcc fl ml10 pr" style="width: 620px;">
						<input type="file" class="file-style" id="xdaTanFileImg" onchange="xmTanUploadImg(this)" accept="image/*" />
						<img id="xmTanImg" src="../../img/test2.jpg" class="setup-img" />
						<div class="edit-font">
							<div class="efdiv">修改图片</div>
							<div class="efdiv2">图片尺寸 720×260 px</div>
						</div>
					</div>
				</div>
				<div class="edit-item clb mt20">
					<div class="edit-item-tt fl"></div>
					<div class="edit-item-cc fl ml10">
						<a href="personalMsg.html" class="fl commqx-btn">取消</a>
						<a href="#" class="fl commqr-btn ml15">确定</a>
					</div>
				</div>
			</div>
		</div>

		<!-- jQuery -->
		<script src="../../sbadmin/bower_components/jquery/dist/jquery.min.js"></script>
		<!-- Bootstrap Core JavaScript -->
		<script src="../../sbadmin/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
		<!-- Metis Menu Plugin JavaScript -->
		<script src="../../sbadmin/bower_components/metisMenu/dist/metisMenu.min.js"></script>
		<!-- DataTables JavaScript -->
		<script src="../../sbadmin/bower_components/datatables/media/js/jquery.dataTables.min.js"></script>
		<script src="../../sbadmin/bower_components/datatables-plugins/integration/bootstrap/3/dataTables.bootstrap.min.js"></script>
		<!-- Custom Theme JavaScript -->
		<script src="../../sbadmin/dist/js/sb-admin-2.js"></script>
		<!-- Page-Level Demo Scripts - Tables - Use for reference -->
	</body>
	<script>
		//判断浏览器是否支持FileReader接口
		if(typeof FileReader == 'undefined') {
			document.getElementById("xmTanDiv").InnerHTML = "<h1>当前浏览器不支持FileReader接口</h1>";
			//使选择控件不可操作
			document.getElementById("xdaTanFileImg").setAttribute("disabled", "disabled");
		}
		//选择图片，马上预览
		function xmTanUploadImg(obj) {
			alert("1")
			var file = obj.files[0];
			console.log(obj);
			console.log(file);
			console.log("file.size = " + file.size); //file.size 单位为byte
			var reader = new FileReader();
			//读取文件过程方法
			reader.onloadstart = function(e) {
				console.log("开始读取....");
			}
			reader.onprogress = function(e) {
				console.log("正在读取中....");
			}
			reader.onabort = function(e) {
				console.log("中断读取....");
			}
			reader.onerror = function(e) {
				console.log("读取异常....");
			}
			reader.onload = function(e) {
				console.log("成功读取....");

				var img = document.getElementById("xmTanImg");
				img.src = e.target.result;
				//或者 img.src = this.result;  //e.target == this
			}
			reader.readAsDataURL(file)
		}
	</script>

</html>